import {useState} from 'react'
import { Card } from 'antd';
import styles from './HomeContent.less'
import HomeContentInfo from './components/HomeContentInfo'
import type { ISaveEnegry } from '../../data'
import imgSrc from '@/../public/icon.png'
const HomeContent = () => {
  // 定义智能基站节能的数据
  const [descSaveEnegry] = useState<ISaveEnegry[]>([
    {
      icon: imgSrc,
      title: '接入情况',
      data: [
        {
          id: 1,
          title: '120',
          content: '接入地市区'
        },
        {
          id: 2,
          title: '278,329',
          content: '5G基站'
        },
        {
          id: 3,
          title: '309,030',
          content: '4G基站'
        }
      ]
    },
    {
      icon: imgSrc,
      title: '节电小区',
      data: [
        {
          id: 1,
          title: '56680/7,234/49,446',
          content: '节电小区总数/5G节电小区/4G节点小区'
        },
      ]
    },
    {
      icon: imgSrc,
      title: '节电统计',
      data: [
        {
          id: 1,
          title: '23455.3',
          content: '节点总量(千瓦时)'
        },
        {
          id: 2,
          title: '30,786.4',
          content: '节电时长(小时)'
        },
      ]
    },
    {
      icon: imgSrc,
      title: '策略统计',
      data: [
        {
          id: 1,
          title: '90,462',
          content: '策略总数'
        },
        {
          id: 2,
          title: '28,983/95%',
          content: '指令总数/下发成功率'
        },
      ]
    },
  ])
  // 定义MIMO智能优化的数据
  const [descMimo] = useState([
    {
      icon: imgSrc,
      title: '任务中心',
      data: [
        {
          id: 1,
          title: '54',
          content: '接入地市(区)'
        },
        {
          id: 2,
          title: '982',
          content: '配置寻优任务'
        },
        {
          id: 3,
          title: '550,000',
          content: '优化小区'
        }
      ]
    },
    {
      icon: imgSrc,
      title: '路损模型',
      data: [
        {
          id: 1,
          title: '5,502',
          content: '路损模型训练'
        },
      ]
    },
  ])
  // 定义配置中心的数据
  const [descConfigCenter] = useState([
    {
      icon: imgSrc,
      title: '数据',
      data: [
        {
          id: 1,
          title: '27',
          content: '网元数据/数据状态'
        },
        {
          id: 2,
          title: '87',
          content: '地图数据'
        },
      ]
    },
    {
      icon: imgSrc,
      title: '白名单',
      data: [
        {
          id: 1,
          title: '10,092',
          content: '智能基站节能'
        },
        {
          id: 2,
          title: '28,739',
          content: 'MIMO智能优化'
        },
      ]
    },
    {
      icon: imgSrc,
      title: '优化区域',
      data: [
        {
          id: 1,
          title: '63,875',
          content: '优化区域'
        }
      ]
    },
  ])
  const topCardTitle = (title: string) => {
    return (
      <>
        <div className={styles.topCardTitle}>{ title }</div>
      </>
    )
  }
  const renderComponent = () => {
    return (
      <>
        <Card className={`${styles['card-box']}`} title={topCardTitle('智能基站节能')} bordered={false}>
          <HomeContentInfo desc={ descSaveEnegry }/>
        </Card>
        <Card className={`${styles['card-box']}`} title={topCardTitle('MIMO智能优化')} bordered={false}>
          <HomeContentInfo  desc={ descMimo }/>
        </Card>
        <Card className={`${styles['card-box']}`} title={topCardTitle('配置中心')} bordered={false}>
          <HomeContentInfo desc={ descConfigCenter } type="配置中心"/>
        </Card> 
      </>
      
    )        
  }
  return (
    <>
      {
        renderComponent()
      }
    </>
  )
}

export default HomeContent